<template>
	<view class="content">
		<view class="top">
			<image lazy-load="true" src="https://im.gbn.red/saveMoney-2.png" mode="widthFix" class="response"></image>
		</view>
		
		<view class="title-v">
			<text class="online"  @click="toSelect(2)" :class="{'isActive':isActive == 2}">
				线上生活
			</text>
			<text class="offline" @click="toSelect(1)" :class="{'isActive':isActive == 1}">
				线下生活
			</text>
		</view>
		
		<view class="list" v-show="isActive ==1">
			<!-- <view class="item" @click="toDeal">
				<image src="../../static/img/temp/111.jpg"></image>
				<view>和平饭店</view>
			</view> -->
		</view>
		
		<view class="list" v-show="isActive == 2">
			<view class="item" @click="toJD">
				<image src="https://im.gbn.red/jd-logo.png"></image>
				<view>京东</view>
			</view>
			<view class="item" @click="toPdd">
				<image src="https://im.gbn.red/pdd-logo.jpg"></image>
				<view>拼多多</view>
			</view>
			<view class="item" @click="toSN">
				<image src="https://im.gbn.red/sn-logo.png"></image>
				<view>苏宁易购</view>
			</view>
			<view class="item" @click="toWph">
				<image src="https://im.gbn.red/wph-logo-2.jpg"></image>
				<view>唯品会</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive:2
			}
		},
		methods:{
			toSelect(val){
				this.isActive = val;
			},
			toWph(){
				uni.navigateTo({
					url: 'wph/index'
				});
			},
			toSN(){
				uni.navigateTo({
					url: 'sn/index'
				});
			},
			toPdd(){
				uni.navigateTo({
					url: 'pdd/index'
				});
			},toJD(){
				uni.navigateTo({
					url: 'jd/index'
				});
			},toDeal(){
				uni.showToast({
					icon:'none',
				    title: '装修升级中...',
				    duration: 2000
				});
			}
		}
	}
</script>

<style>
	.offline{
		margin-left: 30rpx;
	}
	.isActive{
		font-weight: 800;
		color: #e98f36;
		font-size: 40rpx;
	}
	.title-v{
		margin-top: 30rpx;
		margin-left: 50rpx;
		font-size: 33rpx;
	}
	.list{
		display: flex;
		flex-wrap: wrap;
	}
	.list .item image{
		width: 120rpx;
		margin-top: 20rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}
	.list .item{
		background-color: #fff;
		width: 160rpx;
		height: 200rpx;
		font-size: 30rpx;
		text-align: center;
		margin-left: 70rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}
</style>
